<template>
  <div class="container">
    <navigate>管理登录方式</navigate>

    <div class="title flex_row flex_align_center">
      <div class="bar"></div>
      <div class="title_text">常规登录方式</div>
    </div>

    <div class="normal_login_type">
      <div class="item flex_row flex_align_center between">
        <div class="icon_text flex_row flex_align_center">
          <img src="@/assets/images/my/manageLogin/1.png" alt="" />
          <div class="text">账密登录</div>
        </div>
        <v-switch :val="userLogin" @getVal="userLogin = $event" />
      </div>
      <div class="item flex_row flex_align_center between">
        <div class="icon_text flex_row flex_align_center">
          <img src="@/assets/images/my/manageLogin/2.png" alt="" />
          <div class="text">验证码登录</div>
        </div>
        <v-switch :val="verificationCode" @getVal="verificationCode = $event" />
      </div>
      <div class="item flex_row flex_align_center between">
        <div class="icon_text flex_row flex_align_center">
          <img src="@/assets/images/my/manageLogin/3.png" alt="" />
          <div class="text">扫码登录</div>
        </div>
        <v-switch :val="scanQRCodes" @getVal="scanQRCodes = $event" />
      </div>
    </div>

    <div class="title flex_row flex_align_center">
      <div class="bar"></div>
      <div class="title_text">其它登录方式</div>
    </div>

    <div class="else_login_type">
      <div class="item flex_row flex_align_center between">
        <div class="icon_text flex_row flex_align_center">
          <img src="@/assets/images/my/manageLogin/4.png" alt="" />
          <div class="text">人脸登录</div>
        </div>
        <v-switch :val="userLogin" @getVal="userLogin = $event" />
      </div>
      <div class="item flex_row flex_align_center between">
        <div class="icon_text flex_row flex_align_center">
          <img src="@/assets/images/my/manageLogin/5.png" alt="" />
          <div class="text">指纹登录</div>
        </div>
        <v-switch :val="verificationCode" @getVal="verificationCode = $event" />
      </div>
      <div class="item flex_row flex_align_center between">
        <div class="icon_text flex_row flex_align_center">
          <img src="@/assets/images/my/manageLogin/6.png" alt="" />
          <div class="text">感应登录</div>
        </div>
        <v-switch :val="scanQRCodes" @getVal="scanQRCodes = $event" />
      </div>
    </div>

    <button class="btn">保存</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 账号登录
      userLogin: false,
      // 验证码登录
      verificationCode: false,
      //   扫码
      scanQRCodes: false,
    };
  },
  watch: {},
};
</script>

<style lang="less" scoped>
@import "./css/index.less";
</style>